<template>
  <div>
    <!-- <van-nav-bar class="nav-bar" fixed title="功能首页" /> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img class="banner" src="@/assets/images/banner.png" alt="" srcset="" />
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar left-icon="volume-o" text="脚本精灵正式上线！" />
    <div class="menu-list">
      <van-row gutter="10">
        <van-col span="12">
          <router-link :to="{ name: 'guajizhangfen' }">
            <div class="menu-item douyin">
              <div class="menu-item-icon"></div>
              <div class="menu-item-tit">推荐浏览</div>
              <div class="menu-item-text">抖音推荐自动点赞评论</div>
            </div>
          </router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  NavBar,
  Button,
  Field,
  CellGroup,
  Swipe,
  SwipeItem,
  NoticeBar,
  Row,
  Col,
} from "vant";

Vue.use(NavBar);
Vue.use(Button);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NoticeBar);
Vue.use(Row);
Vue.use(Col);

export default {
  name: 'IndexPage',
  computed: {},
};
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
}
.nav-bar {
  top: 20px;
}
.menu-list {
  padding: 10px;
}
.douyin {
  background-color: #0093e9;
  background-image: linear-gradient(304deg, #0093e9 0%, #80d0c7 100%);
}
.menu-item {
  width: 100%;
  height: 100px;
  position: relative;
  border-radius: 10px;
  &-icon {
    font-size: 40px;
    color: #fff;
  }
  &-tit {
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 35px;
    margin: 20px 0 0 20px;
    color: #fff;
    float: left;
  }
  &-text {
    position: absolute;
    font-size: 14px;
    color: #fff;
    bottom: 15px;
    right: 15px;
  }
}
</style>
